<html>
<head>
  <title>stockdock</title>
  <script type="text/javascript" src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  <style type="text/css">
    #main {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    #header {
      flex: 0
    }
    #content {
      flex: 1
    }
  </style>
</head>
<body>
<div id="main">
  <div id="header">
    <h1>Stockdock</h1>
    <input type="text" id="path" />
    <input type="button" id="submit" value="submit" />
    <br><br>
  </div>
  <div id="content">
    <textarea id="output" style="width:100%;height:100%"></textarea>
  </div>
</div>
</body>
<script type="text/javascript">
    $("#submit").click(ev => {
        var path = $("#path").val();
        if (path) {
            $("#output").val("");
            openEventSource(path);
        }
    });

  function openEventSource(path) {
      var source = new EventSource(path);
      source.onopen = ev => {
          console.log("eventsource opened:", ev);
      };
      source.onerror = ev => {
          source.close();
          console.log("eventsource error:", ev);
      };
      source.onmessage = ev => {
          $("#output").val($("#output").val() + ev.data + "\n");
          $("#output").scrollTop($("#output")[0].scrollHeight);
          console.log("eventsource event:", ev);
      };
  }
</script>
</html>